<template>
  <div class="app-container" v-loading="loadingBtn">
        <levelbar></levelbar>
         <el-form label-width="98px"  class="app-content" :rules="rules" :model="dataForm" 
          ref="dataForm">
            <div class="box">
                <div class="appTitle">{{$route.params.sign=='1'?'订单修改':'订单发货'}}</div>
                <div class="form-box">
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="订单编号：">
                                    <span>{{dataForm.orderNumber?dataForm.orderNumber:'--'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="手机号：">
                                    <span>{{dataForm.phone?dataForm.phone:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="产品名称：">
                                     <span>{{dataForm.productName?dataForm.productName:'--'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="收货地址：">
                                     <span>{{dataForm.adressAll?dataForm.adressAll:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="e学云ID号：">
                                    <span>{{dataForm.eCode?dataForm.eCode:'--'}}</span>
                                </el-form-item>
                            </el-col>
                           <el-col :span="11" :offset="2">
                                <el-form-item label="创建时间：">
                                     <span>{{dataForm.createTime?dataForm.createTime:'--'}}</span>
                                </el-form-item>
                            </el-col>
                            
                        </el-row>
                        <el-row :gutter="41" >
                             <el-col :span="11">
                                <el-form-item label="单价：">
                                      <span>{{dataForm.singlePriceAndCash?dataForm.singlePriceAndCash:'--'}}</span>
                                </el-form-item>
                              </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="状态：">
                                     <span>{{dataForm.status=='0'?'未发货':'已发货'}}</span>
                                </el-form-item>
                            </el-col>
                           
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="数量：">
                                     <span>{{dataForm.count?dataForm.count:'--'}}</span>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" :offset="2">
                                <el-form-item label="收货人：">
                                      <span>{{dataForm.receivedUserName?dataForm.receivedUserName:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label=" 总价：">
                                     <span>{{dataForm.totalPriceAndCash?dataForm.totalPriceAndCash:'--'}}</span>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" :offset="2">
                                <el-form-item label="买家备注：">
                                      <span>{{dataForm.buyUserDesc?dataForm.buyUserDesc:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="运货单号："  prop="shippingNumber">
                                      <el-popover placement="top-start" trigger="focus"
                                            content="字符长度不大于20位">
                                            <el-input v-model="dataForm.shippingNumber" placeholder="请输入运货单号" slot="reference" :maxlength="20"></el-input>
                                        </el-popover>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" :offset="2">
                                <el-form-item label="商家备注：">
                                    <el-input v-model="dataForm.sellUserDesc"
                                     placeholder="字数20字以内" :maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="footer">
                            <el-button @click="resetForm('dataForm')">取消</el-button>
                            <el-button type="primary" @click="submitForm('dataForm')" 
                            >确认</el-button>
                        </el-form-item>
                </div>
            </div>
        </el-form>
  </div>
</template>
<script>
import Levelbar from '../../../layout/Levelbar';
import imgUpload from 'components/Upload/fileUpload';
import Tinymce from 'components/Tinymce';
import { getOrderInfo, writeOrder, getShipping} from 'api/creditShop';
export default {
    name: 'orderDetail',
    components: { Levelbar, imgUpload, Tinymce},
    data() {
        return {
            loadingBtn: true, // 确定按钮的加载
            dataForm: {
                orderNumber: '', // “订单号”,
                phone: '', // “手机号”,
                productName: '', // “商品名”
                adressAll: '', // “完整地址”
                eCode: '', // “e学云ID号”,
                createTime: '', // 创建时间
                singlePriceAndCash: '', // “单价”
                status: '', // 状态//0:下线 1:上线
                count: '', // 数量
                receivedUserName: '', // “收货人名”
                totalPriceAndCash: '', // 总价”
                buyUserDesc: '', // “买家备注”
                sellUserDesc: '', // “商家备注”
                shippingNumber: '' // “运单号”
            },
            //   商品类型
            goodsTypeArr: [
              {typeName: '虚拟商品', typeId: '0'},
              {typeName: '勋章', typeId: '1'},
              {typeName: '实物商品', typeId: '2'}
            ],
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: []
            },
            rules: {
                productName: [
                    { required: true, message: '请输入商品名称'}
                ],
                price: [
                   {required: true, message: '请输入商品价格'}
                ],
                type: [
                   {required: true, message: '请输入商品类型'}
                ],
                bonusName: [
                   {required: true, message: '请输入红包名'}
                ],
                bonusPrice: [
                   {required: true, message: '请输入红包金额'}
                ],
                isGive: [
                   {required: true, message: '请选择是否赠送'}
                ],
                isSel: [
                   {required: true, message: '请选择是否兑换'}
                ],
                shippingNumber: [
                   {required: true, message: '请输入运货单号', trigger: 'blur'},
                   {pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的运货单号', trigger: 'blur'} 
                ]
            }
        }
    },
    created() {
        this.getOrderInfo();
    },
    methods: {

        // 要是有id就回填对应信息
        getOrderInfo() {
            if (this.$route.params.id) {
                let id=this.$route.params.id;
                getOrderInfo(id).then(res => {
                    this.loadingBtn=false;
                    let infor=res.data.content;
                    this.dataForm.orderNumber=infor.orderNumber;
                    this.dataForm.phone=infor.phone;
                    this.dataForm.productName=infor.productName;
                    this.dataForm.adressAll=infor.adressAll;
                    this.dataForm.eCode=infor.eCode;
                    this.dataForm.createTime=infor.createTime;
                    this.dataForm.singlePriceAndCash=infor.singlePriceAndCash;
                    this.dataForm.status=infor.status;
                    this.dataForm.count=infor.count;
                    this.dataForm.receivedUserName=infor.receivedUserName;
                    this.dataForm.totalPriceAndCash=infor.totalPriceAndCash;
                    this.dataForm.buyUserDesc=infor.buyUserDesc;
                    this.dataForm.sellUserDesc=infor.sellUserDesc;
                    this.dataForm.shippingNumber=infor.shippingNumber;
                });
            }
        },

        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        // 编辑订单还是发货
                        let sign=this.$route.params.sign=='1'?'1':'0';
                        this.writeOrGetShipping(sign);
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(ruleForm) {
            this.$router.push({path: '/orderManage'});
        },
        writeOrGetShipping(sign) {
            this.loadingBtn=true;
            let id=this.$route.params.id;
            let shippingNumber=this.dataForm.shippingNumber;
            let sellUserDesc=this.dataForm.sellUserDesc;
            if (sign=='1') {// 编辑订单
                writeOrder(id, shippingNumber, sellUserDesc).then(res => {
                    this.$store.dispatch('UpdateCache', true); 

                    this.loadingBtn=false;
                    this.$message.success('订单修改成功'); 
                    this.$router.push({path: '/orderManage/list'});
                }).catch(() => {
                    this.loadingBtn=false;
                });
            } else {// 发货
                getShipping(id, shippingNumber, sellUserDesc).then(res => {
                    this.$store.dispatch('UpdateCache', true); 

                    this.$message.success('订单发货成功'); 
                    this.loadingBtn=false;
                    this.$router.push({path: '/orderManage/list'});
                }).catch(() => {
                    this.loadingBtn=false;
                });
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .form-item-title{
        display: inline-block;
        width:200px;
    }
    .box {
            padding:0 50px;
            background: #fff;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            .appTitle {
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
            margin-bottom:40px;
            }
            .footer{
                padding:80px 0px 40px;
                position: relative;
                left:-50px;
                text-align: center;
            }
        }
         .upload-image {
            //  border:1px solid red;
             display: block;
            .avatar-uploader .el-upload {
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #20a0ff;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }

        }
        .title-level{
            padding-left:20px;
             display: inline-block;
            text-align: left;
            vertical-align: middle;
            font-size: 14px;
            color: rgb(106, 85, 72);
            line-height: 1;
            padding: 11px 12px 11px 0;
            box-sizing: border-box;
        }
}
</style>

